<template>
    <div class="mainSty">
        <div class="min_tit_sty flex_ard">
            <div class="main_tab_sty">
                <div>{{ myUpdateNum.uploadNum }}</div>
                <div>上传总数</div>
            </div>
            <div style="color: #f0f0f0;">|</div>
            <div class="main_tab_sty">
                <div>{{ myUpdateNum.earningsSum }}</div>
                <div>收益(元)</div>
            </div>
            <div style="color: #f0f0f0;">|</div>
            <div class="main_tab_sty">
                <div>{{ myUpdateNum.browseNum }}</div>
                <div>浏览次数</div>
            </div>
            <div style="color: #f0f0f0;">|</div>
            <div class="main_tab_sty">
                <div>{{ myUpdateNum.downloadedNum }}</div>
                <div>被下载次数</div>
            </div>
        </div>
        <div class="main_con_sty">
            <div class="con_tab_sty ">
                <div class="flex_str" style="margin-top: 12px;">
                    <div v-for="(item, index) in statusList" :key="index" @click="statusTabClick(item.id)"
                        class="con_tab_item_sty"
                        :style="statusVal == item.id ? 'color: #E21C20;border-bottom: 2px solid #E21C20;' : 'border-bottom: 2px solid #fff;'">
                        {{ item.name }}
                    </div>
                    <div class="up_tit_sty" style="margin-left: 20px;">小区名: </div>
                    <el-input style="margin-right: 20px;" class="up_ipt_sty" placeholder="请输入小区名或备案名" v-model="params.communityName" @keyup.enter.native="getMyUpdateFUn"></el-input>

                    <!-- <el-config-provider :locale="locale">
                        <el-date-picker v-model="pickTime" type="daterange" range-separator="--" start-placeholder="开始时间"
                            end-placeholder="结束时间" @change="dataPicker" />
                    </el-config-provider> -->
                </div>
            </div>
            <div class="uploadBox ">
                <div class="uploadItem flex_str" v-for="(item, index) in myUpdateData" :key="index">
                    <img :src="item.firstImage ? item.firstImage : an1" class="imgSty" @click="goDetail(item.id)" />
                    <!-- <img src="@/assets/img/an1.png" /> -->
                    <div class="item_txt_sty">
                        <div class="item_name_sty">{{ item.communityName }} <span>{{ item.buildingNo }}</span></div>
                        <div>{{ item.position }}</div>
                        <div>原始框架cad:{{ item.originalCadPrice }} 户币</div>
                        <div v-if="item.planeCadPrice">
                            <div>平面方案cad:{{ item.planeCadPrice }} 户币</div>
                        </div>
                        <div></div>

                        <div class="flex_btn statusSty">
                            <div v-if="item.effectPicturePrice">
                                <div>效果图：{{ item.effectPicturePrice }} 户币</div>
                            </div>
                            <div></div>
                            <div @click.stop="editMyUpdate(item.id)" class="editBtnSty">重修改</div>
                        </div>

                        <div class="flex_btn statusSty">
                            <div v-if="item.realScenePicturesPrice">
                                <div>实景照片：{{ item.realScenePicturesPrice }} 户币</div>
                            </div>
                            <div></div>
                            <div>{{ item.statusName }} </div>
                            <dev v-if="item.status == 2">--拒绝原因：{{ item.nt }}</dev>
                        </div>
                    </div>
                </div>
                <div class="flex_cen" style="width: 100%;margin-top: 50px;">
                    <el-config-provider :locale="locale">
                        <el-pagination v-model:current-page="params.current" v-model:page-size="params.size"
                        :page-sizes="[10, 20, 30, 50]" :small="false" :disabled="false" :background="true"
                        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getMyUpdateFUn"
                        @current-change="getMyUpdateFUn" />
                    </el-config-provider>
                    
                </div>
            </div>

        </div>
    </div>
    <editMyUpdateCom v-model="dialog.isShow" :id="houseId" @getMyUpdate="getMyUpdateFUn"></editMyUpdateCom>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import an1 from '@/assets/img/an1.png'
// @ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { getMyUpdateApi, myStatisticsApi } from '@/api/index/index'
import { formatDayTime } from '@/utils/moment'
import { useRouter } from 'vue-router'
import editMyUpdateCom from './editMyUpdate.vue'
import { it } from 'element-plus/es/locale'
const router = useRouter()
const city = ref<string>('定位')
const houseId = ref<any>('0')
const props = {
    expandTrigger: 'hover',
    label: 'name',
    value: 'code'
}
const dialog = ref({
    isShow: false
})
const statusVal = ref(null)
const statusList = ref([{
    id: null,
    name: '全部'
}, {
    id: 1,
    name: '已通过'
}, {
    id: 0,
    name: '待审核'
}, {
    id: 2,
    name: '未通过'
}, {
    id: 3,
    name: '已下架'
}])
const myUpdateData = ref<any>([])
const total = ref(0)
// 时间段
const pickTime = ref('')
const locale = zhCn
const myUpdateNum = ref({
    browseNum: 0,
    downloadedNum: 0,
    earningsSum: 0,
    uploadNum: 0
})
const params = reactive({
    current: 1,
    size: 10,
    status: null,
    startDate:'',
    endDate:'',
    communityName:''
})
const handleChange = (e: any) => {
    city.value = e
}
const statusTabClick = (id: any) => {
    statusVal.value = id
    params.status = id
    getMyUpdateFUn()
}

const getMyUpdateFUn = () => {
    dialog.value.isShow = false
    getMyUpdateApi(params).then((res: any) => {
        myUpdateData.value = res.data.records;
        total.value = res.data.total
    })
}
const dataPicker = (e: any) => {
    if (e == null) {
        params.startDate = ''
        params.endDate = ''
        getMyUpdateFUn()
    } else {
        params.startDate = formatDayTime(e[0])
        params.endDate = formatDayTime(e[1])
        getMyUpdateFUn()
    }

}
const getMyStatistics = () => {
    myStatisticsApi().then((res: any) => {
        myUpdateNum.value = res.data
    })
}
const goDetail = (id: any) => {
    router.push({ path: '/room/detail', query: { id: id } })
}
const editMyUpdate = (id: any) => {
    dialog.value.isShow = true
    houseId.value = id
}
onMounted(() => {
    getMyStatistics()
    getMyUpdateFUn()
})
const statusCom = computed(() => {
    // value是计算属性执行后，再次执行return里面的函数时传的参数
    return (value: any) => {
        if (value == 0) {
            return '待审核'
        } else if (value == 1) {
            return '已通过'
        } else if (value == 2) {
            return '未通过'
        } else if (value == 3) {
            return '已下架'
        }
    }
})
</script>
<style scoped>

:deep(.is-active) {
    background-color: #FF9D07 !important;
}

:deep(.el-pagination__sizes) {
    display: none !important;
}
.imgSty {
    width: 260px;
}

.uploadBox {
    margin-top: 30px;
}

.uploadItem {
    margin: 10px 0;
}

.item_name_sty {
    font-size: 22px;
    margin-bottom: 14px;
}

.statusSty {
    width: 600px;
}

.item_txt_sty {
    margin-left: 22px;
    margin-right: 30px;
    font-size: 18px;

}

.editBtnSty {
    /* padding: 10px 0; */
    position: relative;
    top: -20px;

    font-size: 18px;
    border-radius: 6px;
}

.saveBtnSty {
    padding: 10px 30px;
    background-color: #E21C20;
    font-size: 18px;
    border-radius: 6px;
    color: #fff;
    margin-left: 140px !important;
}

.con_tab_sty {
    border: 8px solid #f0f0f0;
    padding: 8px 0;
}

.con_tab_item_sty {
    margin: 0 20px;
}

.con_tit {
    width: 100%;
}

.con_tit el-input {
    width: 360px;
}

.con_tit div {
    margin-bottom: 20px;
    margin-right: 20px;
}

.cascSty {
    width: 240px;
}

.main_tab_sty {
    text-align: center;
    font-size: 18px;
    color: #A19EA8;
}

.main_tab_sty :first-child {
    color: #000;
    margin-bottom: 4px;
}

.mainSty {
    width: 80%;
    min-height: 500px;
}

.min_tit_sty {
    width: 100%;
    min-height: 120px;
    background-color: #fff;
    margin-bottom: 40px;
}

.main_con_sty {
    width: 100%;
    min-height: 500px;
    background-color: #fff;
    padding: 30px 20px;
    margin-bottom: 40px;
}

.up_tit_sty {
    width: 70px;
}

.up_ipt_sty {
    width: 260px;
}
</style>